import { Descriptions, PageHeader, message } from "antd";
import axios from "axios";
import React, { useState, useEffect } from "react";
import { useParams } from "react-router"; //用于获取当前页面匹配路由的`params`参数
import moment from "moment";
import "./newsModules.css";

export default function NewsPreview() {
  const params = useParams();
  const [newsInfo, setNewsInfo] = useState(null);
  const auditList = ["未审核", "审核中", "已通过", "未通过"];
  const publishList = ["未发布", "待发布", "已发布", "已下线"];
  const colorList = ["yellow", "orange", "green", "red"];
  useEffect(() => {
    // console.log(params.id);
    axios
      .get(
        `http://localhost:5000/news/${params.id}?_expand=category&_expand=role`
      )
      .then((res) => {
        // console.log(res.data);
        setNewsInfo(res.data);
      })
      .catch(() => {
        message.warning("获取新闻信息失败！");
      });
  }, [params.id]);
  return (
    <div className="site-page-header-ghost-wrapper">
      {/* useState(null)初始设置newsInfo为空,在发送请求获取数据之前就会渲染一次，此时newsInfo为空，无法渲染会报错，所以要先判断 newsInfo */}
      {newsInfo && (
        <div>
          <PageHeader
            ghost={false}
            onBack={() => window.history.back()}
            title={newsInfo?.title}
            subTitle={newsInfo.category.title}
          >
            <Descriptions size="small" column={3}>
              <Descriptions.Item label="创建者">
                {newsInfo.author}
              </Descriptions.Item>
              <Descriptions.Item label="创建时间">
                {moment(newsInfo.createTime).format("YYYY-MM-DD HH:mm:ss")}
              </Descriptions.Item>
              <Descriptions.Item label="发布时间">
                {newsInfo.publishTime
                  ? moment(newsInfo.publishTime).format("YYYY-MM-DD HH:mm:ss")
                  : "---"}
              </Descriptions.Item>
              <Descriptions.Item label="区域">
                {newsInfo.region}
              </Descriptions.Item>
              <Descriptions.Item label="审核状态">
                <span style={{ color: colorList[newsInfo.auditState] }}>
                  {auditList[newsInfo.auditState]}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="发布状态">
                <span style={{ color: colorList[newsInfo.publishState] }}>
                  {publishList[newsInfo.publishState]}
                </span>
              </Descriptions.Item>
              <Descriptions.Item label="访问数量">
                {newsInfo.view}
              </Descriptions.Item>
              <Descriptions.Item label="点赞数量">
                {newsInfo.star}
              </Descriptions.Item>
              <Descriptions.Item label="评论数量">0</Descriptions.Item>
            </Descriptions>
          </PageHeader>
          <div
            dangerouslySetInnerHTML={{
              __html: newsInfo.content
                ? newsInfo.content
                : newsInfo.contentInfo,
            }}
            style={{
              border: "1px solid black",
            }}
          ></div>
        </div>
      )}
    </div>
  );
}
